<template>
	<div class="department">
		<el-card class="!border-none" shadow="never">
			<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
				<el-form-item label="品牌名称" prop="name">
					<el-input class="w-[280px]" v-model="queryParams.name" clearable @keyup.enter="getLists" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getLists">查询</el-button>
					<el-button @click="resetParams">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="!border-none mt-4" shadow="never">
			<div>
				<el-button v-perms="['dept.dept/add']" type="primary" @click="handleAdd()">
					<template #icon>
						<icon name="el-icon-Plus" />
					</template>
					新增
				</el-button>
				<el-button @click="handleExpand"> 展开/折叠 </el-button>
			</div>
			<el-table ref="tableRef" class="mt-4" size="large" v-loading="loading" :data="lists" row-key="id"
				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">

				<el-table-column label="品牌名称" prop="name" min-width="150" show-overflow-tooltip />
<!-- 				<el-table-column label="" prop="logo">
					<template #default="{ row }">
						<el-image v-if="row.pid==0" style="width:50px;height:80px;line-height: 50px;" :src="row.logo" />
					</template>
				</el-table-column> -->
				<el-table-column label="软件库" prop="" min-width="150" show-overflow-tooltip align="center">
					<template #default="{ row }">
						<el-button v-if="row.pid!=0" v-perms="['dept.dept/add']" type="primary" link
							@click="handleSoftware(row.id)">
							进入
						</el-button>
					</template>
				</el-table-column>
				<el-table-column label="资料库" prop="" min-width="150" show-overflow-tooltip align="center">
					<template #default="{ row }">
						<el-button v-if="row.pid!=0" v-perms="['dept.dept/add']" type="primary" link
							@click="handleInformation(row.id)">
							进入
						</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="250" fixed="right" align="center">
					<template #default="{ row }">
						<el-button v-if="row.pid==0" v-perms="['dept.dept/add']" type="primary" link
							@click="handleAdd(row.id)">
							新增
						</el-button>
<!-- 						<el-button v-if="row.pid!=0" v-perms="['dept.dept/add']" type="primary" link
							@click="handleSoftware(row.id)">
							维修软件库
						</el-button>
						<el-button v-if="row.pid!=0" v-perms="['dept.dept/add']" type="primary" link
						
							@click="handleInformation(row.id)">
							维修资料库
						</el-button> -->
						<el-button v-if="row.pid==0" v-perms="['dept.dept/edit']" type="primary" link
							@click="handleEdit(row)">
							编辑
						</el-button>
						<el-button v-if="row.pid !== 0" v-perms="['dept.dept/delete']" type="danger" link
							@click="handleDelete(row.id)">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
	</div>
</template>
<script lang="ts" setup name="department">
	import type { ElTable, FormInstance } from 'element-plus'


	import { apiCarBrandLists, apiCarBrandDelete } from '@/api/car_brand'
	import feedback from '@/utils/feedback'

	import EditPopup from './edit.vue'
	import {useRoute, useRouter} from "vue-router"
	
	
	const router = useRouter()
	const route=useRoute();
	const tableRef = shallowRef<InstanceType<typeof ElTable>>()
	const editRef = shallowRef<InstanceType<typeof EditPopup>>()
	const formRef = shallowRef<FormInstance>()
	let isExpand = false
	const loading = ref(false)
	const lists = ref<any[]>([])
	const queryParams = reactive({
		status: '',
		name: ''
	})
	const showEdit = ref(false)
	const getLists = async () => {
		loading.value = true
		lists.value = await apiCarBrandLists(queryParams)
		loading.value = false
	}
	
	onMounted(() => {
		if(route.query.search!==undefined){
			queryParams.name = route.query.search
			
		}
	})

	const resetParams = () => {
		formRef.value?.resetFields()
		getLists()
	}

	const handleAdd = async (id ?: number) => {
		showEdit.value = true
		await nextTick()
		if (id) {
			editRef.value?.setFormData({
				pid: id
			})
		}
		editRef.value?.open('add')
	}

	const handleEdit = async (data : any) => {
		showEdit.value = true
		await nextTick()
		editRef.value?.open('edit')
		editRef.value?.getDetail(data)
	}

	const handleDelete = async (id : number) => {
		await feedback.confirm('确定要删除？')
		await apiCarBrandDelete({ id })
		getLists()
	}
	
	const handleInformation = (id:number) => {
		router.push('/information_list?id='+id)
	}
	
	const handleSoftware = (id:number) => {
		router.push('/maintenance_software?id='+id)
	}

	const handleExpand = () => {
		isExpand = !isExpand
		toggleExpand(lists.value, isExpand)
	}

	const toggleExpand = (children : any[], unfold = true) => {
		for (const key in children) {
			tableRef.value?.toggleRowExpansion(children[key], unfold)
			if (children[key].children) {
				toggleExpand(children[key].children!, unfold)
			}
		}
	}

	onMounted(async () => {
		await getLists()
		nextTick(() => {
			handleExpand()
		})
	})
</script>